<template>
  <div>
    <div>
      <img class='bg' src="static/imgs/isActivityStart/bg.png"/>
      <div class = 'mainContent' v-show = 'activityState === 2'>
        <img  class = 'bgImg' src="static/imgs/isActivityStart/bg_notStart.png"/>
        <img  class = 'bgImg' src="static/imgs/isActivityStart/notStart.png"/>
      </div>
      <div class = 'mainContent' v-show = 'activityState === 3'>
        <img  class = 'bgImg' src="static/imgs/isActivityStart/bg_stop.png"/>
        <img  class = 'bgImg' src="static/imgs/isActivityStart/stop.png"/>
      </div>
      <div class = 'mainContent' v-show = 'activityState === 1'>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { getActivityState, getOpenIdAction } from '../axios/api/isActivityStart_api'
import { getCookie } from '../axios/utils'
export default {
  name: 'is-activity-start',
  data () {
    return {
      username: '',
      activityState: 1,
      activity: {},
      openid: ''
    }
  },
  created () {
      this.init()
  },
  methods: {
    async init () {
      let activityId = this.$route.query.activityId
      if (!this.$route.query.code) {
        let { data } = await getActivityState({activityId: activityId})
        if (data.code === 1) {
          this.activityState = data.state
          if (this.activityState === 1) {
            // TODO
            let url = encodeURI('http://www.wxahd.com/isActivityStart?')
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2cb32af341b4192c&redirect_uri=' + url + '&response_type=code&scope=snsapi_userinfo&state=' + activityId + '#wechat_redirect'
          }
        }else {
          this.$message({
            message: '服务器错误，请稍后再试',
            type: 'error'
          })
        }
      } else{
        let code = this.$route.query.code
        let activityId = this.$route.query.state
        try {
          let openID = getCookie('openid')
          if (!openID) {
            this.getOpenId(code)
          }else {
            this.openid = openID
            this.getActivity(activityId)
          }
        }finally{
          console.log('log')
        }
      }
    },
    async getOpenId (code) {
      let activityId = this.$route.query.state
      let result = await getOpenIdAction({code})
      if (result.data.code === 1) {
        this.openid = result.data.openId
        document.cookie = 'openid=' + this.openid
        console.log(activityId)
        this.getActivity(activityId)
      }else {
        this.$message({
          message: '服务器错误，请稍后再试',
          type: 'error'
        })
      }

    },
    async getActivity (activityId) {
      console.log(activityId)
      let { data } = await getActivityState({activityId})
      if (data.code === 1) {
        this.activity = {
          title: data.activity && data.activity.userTemplate && data.activity.userTemplate.title,
          activityID: data.activity && data.activity.id,
          return_url: data.return_url,
          logo: '',
          username: this.openid
        }
        this.startActivity()
      }else {
        this.$message({
          message: '服务器错误，请稍后再试',
          type: 'error'
        })
      }
    },
    startActivity () {
      let activity = this.activity
      // TODO
      let url = 'http://www.wxahd.com/littleGame/2048/' + '?'
      for (let key in activity) {
        url += key + '=' + activity[key] + '&'
      }
      url = url.slice(0, -1) // 切除最后一个&
      window.location.href = url
    }
  }
}
</script>

<style scoped>
  .bg{
    width: 100%;
  }
  .bgImg{
    width: 50%;
    margin: 0 auto;
  }
  .mainContent{
    width: 100%;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top:45%;
    transform: translate(-50%,-50%);
  }
  .mainContent button{
    width: 40%;
    height: 30px;
    margin: 0 auto;
  }
  .startForm{
    margin-bottom: 30px;
  }
  .startForm input{
    border: 1px solid #ccc;
    margin-left: 10px;
    height: 30px;
  }
</style>
